<template>
  <div class="index">
    <!-- 搜索跳转 -->
    <view class="search" style="padding: 30rpx" @click="goSearch">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50rpx;
          background-color: #f7f7f7;
          height: 60rpx;
          width: 100%;
        "
      >
        <image
          src="../../static/images/icon/search.png"
          style="width: 32rpx; height: 32rpx; margin-right: 10rpx"
        ></image>
        <span style="display: block; font-size: 24rpx; color: #999">搜索</span>
      </div>
    </view>
    <!-- 轮播图 -->
    <view class="homePage">
      <swiper style="padding: 30rpx" :autoplay="true" :indicator-dots="true">
        <swiper-item
          v-for="item in indexImg"
          :key="item.seq"
          style="border-radius: 10rpx"
        >
          <image :src="item.imgUrl" @click="goDetail(item.relation)"></image>
        </swiper-item>
      </swiper>
      <view
        style="
          display: flex;
          justify-content: space-between;
          background: #fff;
          padding-top: 20rpx;
          padding-bottom: 30rpx;
        "
      >
        <view
          style="
            text-align: center;
            width: 25%;
            display: flex;
            flex-direction: column;
            margin: auto;
            align-items: center;
          "
          v-for="item in catList"
          :key="item.id"
        >
          <image
            :src="item.icon"
            @click="goCollection(item.title)"
            style="width: 75rpx; height: 75rpx"
          />
          <span>{{ item.title }}</span>
        </view>
      </view>
      <view
        @click="goNotice"
        style="
          position: relative;
          height: 90rpx;
          background: #fff;
          margin: auto;
          padding: 0 60rpx 0 100rpx;
          box-sizing: border-box;
          box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);
          border: 2rpx solid #fafafa;
          overflow: hidden;
        "
      >
        <image
          src="../../static/images/icon/horn.png"
          style="
            width: 77rpx;
            height: 36rpx;
            position: absolute;
            left: 20rpx;
            top: 27rpx;
            margin-right: 8rpx;
          "
        ></image>
        <swiper
          :autoplay="true"
          :vertical="true"
          style="height: 90rpx; line-height: 90rpx"
        >
          <swiper-item
            style="
              position: absolute;
              width: 100%;
              height: 100%;
              transform: translate(0px, 100%) translateZ(0px);
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              text-align: left;
              height: 90rpx;
              font-size: 26rpx;
              line-height: 90rpx;
            "
            v-for="item in topNoticeList"
            :key="item.id"
          >
            {{ item.title }}
          </swiper-item>
        </swiper>
        <text
          style="
            width: 15rpx;
            height: 15rpx;
            border-top: 3rpx solid #686868;
            border-right: 3rpx solid #686868;
            transform: rotate(45deg);
            position: absolute;
            right: 30rpx;
            top: 34rpx;
          "
        ></text>
      </view>
    </view>
    <!-- 每日上新 -->
    <view
      style="
        background-image: url('');
        background-position: top;
        background-size: 100% 332rpx;
        background-repeat: no-repeat;
        background-color: #fff;
      "
    >
      <view
        style="
          position: relative;
          height: 64rpx;
          line-height: 64rpx;
          font-size: 32rpx;
          padding: 40rpx 0 10rpx 30rpx;
          color: #fff;
          background: none;
        "
      >
        <text>每日上新</text>
        <view style="color: #999; display: inline-block; text-align: right">
          <text
            style="
              position: absolute;
              right: 30rpx;
              top: 48rpx;
              color: #fff;
              font-size: 24rpx;
              background: #65addf;
              border-radius: 30rpx;
              padding: 0 30rpx;
              height: 44rpx;
              line-height: 44rpx;
            "
            @click="goDailyUpdate('每日上新')"
            >查看更多</text
          >
        </view>
      </view>
      <view
        style="
          margin: auto;
          height: auto;
          width: calc(100% - 40rpx);
          padding: 0 20rpx;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
        "
      >
        <view
          v-for="item in prodListByTagId"
          :key="item.prodId"
          @click="goDetail(item.prodId)"
          style="
            border-radius: 10rpx;
            width: 220rpx;
            background: #fff;
            display: inline-block;
            margin-bottom: 20rpx;
            box-shadow: 0rpx 6rpx 8rpx rgba(58, 134, 185, 0.2);
          "
        >
          <div>
            <div style="width: 100%; font-size: 0">
              <img
                :src="item.pic||''"
                alt="您的图片走丢了哦"
                style="
                  width: 220rpx;
                  height: 220rpx;
                  vertical-align: middle;
                  border-top-left-radius: 10rpx;
                  border-top-right-radius: 10rpx;
                  font-size: 0;
                "
              >
            </div>
            <div
              style="
                font-size: 28rpx;
                overflow: hidden;
                margin: 10rpx 0;
                height: 68rpx;
                word-break: break-all;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                color: #000;
                padding: 0 10rpx;
              "
            >
              {{ item.prodName }}
            </div>
            <div
              style="
                font-family: Arial;
                display: inline-block;
                color: #eb2444;
                padding-bottom: 10rpx;
                padding-left: 10rpx;
              "
            >
              <span style="font-size: 24rpx">￥</span>
              <span style="font-size: 32rpx">{{ item.price }}</span>
            </div>
          </div>
        </view>
      </view>
      <view> </view>
    </view>
    <!-- 商城热卖 -->
    <div>
      <div
        style="
          position: relative;
          height: 64rpx;
          line-height: 64rpx;
          font-size: 32rpx;
          padding: 40rpx 0 10rpx 30rpx;
          color: #333;
          background: #fff;
        "
      >
        <span>商城热卖</span>
        <div style="color: #999; display: inline-block; text-align: right">
          <span
            style="
              position: absolute;
              right: 30rpx;
              top: 48rpx;
              color: #666;
              font-size: 24rpx;
              padding: 0 20rpx;
              height: 44rpx;
              line-height: 44rpx;
            "
            @click="goDailyUpdate('商城热卖')"
            >更多</span
          >
          <span
            style="
              width: 15rpx;
              height: 15rpx;
              transform: rotate(45deg);
              position: absolute;
              top: 58rpx;
              right: 30rpx;
              border-top: 2rpx solid #666;
              border-right: 2rpx solid #666;
            "
          ></span>
        </div>
      </div>
      <div style="padding-bottom: 20rpx; background: #fff">
        <div
          v-for="item in prodListByTagIdTow"
          :key="item.prodId"
          @click="goDetail(item.prodId)"
          style="
            width: 345rpx;
            display: inline-block;
            background: #fff;
            padding-bottom: 20rpx;
            box-sizing: border-box;
            box-shadow: 0rpx 6rpx 8rpx rgba(58, 134, 185, 0.2);
            margin: 20rpx 10rpx 10rpx 20rpx;
          "
        >
          <div style="font-size: 0; text-align: center">
            <image :src="item.pic" style="width: 341rpx; height: 341rpx" />
          </div>
          <div style="margin-top: 20rpx; padding: 0 10rpx">
            <div
              style="
                font-size: 28rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ item.prodName }}
            </div>
            <div
              style="
                font-size: 22rpx;
                color: #999;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ item.brief }}
            </div>
            <div
              style="
                position: relative;
                height: 70rpx;
                line-height: 70rpx;
                font-family: Arial;
              "
            >
              <div
                style="
                  font-family: Arial;
                  display: inline-block;
                  color: #eb2444;
                  padding-bottom: 10rpx;
                  padding-left: 10rpx;
                "
              >
                <span style="font-size: 24rpx">￥</span>
                <span style="font-size: 32rpx">{{ item.price }}</span>
              </div>
              <image
                src="../../static/images/tabbar/basket-sel.png"
                style="
                  width: 50rpx;
                  height: 50rpx;
                  position: absolute;
                  right: 0;
                  bottom: 7rpx;
                  padding: 8rpx;
                "
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 更多宝贝 -->
    <div style="background: #fff">
      <div
        style="
          position: relative;
          height: 64rpx;
          line-height: 64rpx;
          font-size: 32rpx;
          padding: 40rpx 0 10rpx 30rpx;
          color: #333;
          background: #fff;
        "
      >
        更多宝贝
      </div>
      <div>
        <div
          v-for="item in prodListByTagIdThree"
          :key="item.prodId"
          @click="goDetail(item.prodId)"
          style="
            position: relative;
            display: flex;
            padding: 20rpx;
            justify-content: flex-start;
            border-top: 2rpx solid #f4f4f4;
          "
        >
          <div style="width: 250rpx; height: 250rpx">
            <image :src="item.pic" style="max-width: 100%; max-height: 100%" />
          </div>
          <div
            style="
              margin-left: 30rpx;
              width: 72%;
              padding-bottom: 10rpx;
              display: flex;
              flex-direction: column;
              justify-content: center;
            "
          >
            <div
              style="
                margin: 0;
                font-size: 28rpx;
                overflow: hidden;
                margin-bottom: 20rpx;
                word-break: break-all;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              "
            >
              {{ item.prodName }}
            </div>
            <div
              style="
                font-size: 22rpx;
                color: #999;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ item.brief }}
            </div>
            <div style="margin-top: 30rpx">
              <div
                style="
                  font-family: Arial;
                  display: inline-block;
                  color: #eb2444;
                  padding-bottom: 10rpx;
                  padding-left: 10rpx;
                "
              >
                <span style="font-size: 24rpx">￥</span>
                <span style="font-size: 32rpx">{{ item.price }}</span>
              </div>
              <image
                src="../../static/images/tabbar/basket-sel.png"
                style="
                  width: 50rpx;
                  height: 50rpx;
                  position: absolute;
                  right: 46rpx;
                  padding: 8rpx;
                "
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getTagList,
  getIndexImgs,
  getTopNoticeList,
  getProdListByTagId,
} from "@/services/index";
export default {
  data() {
    return {
      prodTagList: [],
      indexImg: [],
      topNoticeList: [],
      prodListByTagId: [],
      prodListByTagIdTow: [],
      prodListByTagIdThree: [],
      size: 6,
      catList: [
        {
          id: 0,
          title: "新品推荐",
          icon: "../../static/images/icon/newProd.png",
        },
        {
          id: 2,
          title: "限时特购",
          icon: "../../static/images/icon/timePrice.png",
        },
        {
          id: 3,
          title: "每日疯抢",
          icon: "../../static/images/icon/neweveryday.png",
        },
      ],
    };
  },
  async created() {
    let prodTagList = await getTagList();
    let indexImg = await getIndexImgs();
    let topNoticeList = await getTopNoticeList();
    let prodListByTagId = await getProdListByTagId({
      tagId: 1,
      size: this.size,
    });
    let prodListByTagIdTow = await getProdListByTagId({
      tagId: 2,
      size: this.size,
    });
    let prodListByTagIdThree = await getProdListByTagId({
      tagId: 3,
      size: this.size,
    });
    this.prodTagList = prodTagList;
    this.indexImg = indexImg;
    this.topNoticeList = topNoticeList;
    this.prodListByTagId = prodListByTagId.records;
    this.prodListByTagIdTow = prodListByTagIdTow.records;
    this.prodListByTagIdThree = prodListByTagIdThree.records;
  },
  methods: {
    goSearch() {
      wx.navigateTo({
        url: "search/index",
      });
    },
    goDetail(prodId) {
      wx.navigateTo({
        url: `../category/prod/detail?prodId=${prodId}`,
      });
    },
    goCollection(title) {
      wx.navigateTo({
        url: `portClassify/index?title=${title}`,
      });
    },
    goNotice() {
      wx.navigateTo({
        url: `notice/index`,
      });
    },
    goDailyUpdate(title) {
      wx.navigateTo({
        url: `portClassify/index?title=${title}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
